<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
                padding: 0;
                margin: 0;
            }
    
            .wrap {
                width: 300px;
                margin: 100px auto 0;
            }
    
            table {
                border-collapse: collapse;
                border-spacing: 0;
                border: 1px solid #c0c0c0;
                width: 300px;
            }
    
            th,
            td {
                border: 1px solid #d0d0d0;
                color: #404060;
                padding: 10px;
            }
    
            th {
                background-color: #09c;
                font: bold 16px "微软雅黑";
                color: #fff;
            }
    
            td {
                font: 14px "微软雅黑";
            }
    
            tbody tr {
                background-color: #f0f0f0;
            }
    
            tbody tr:hover {
                cursor: pointer;
                background-color: #fafafa;
            }
        </style>

</head>

<body>

    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="theadInp" />
                    </th>
                    <th>菜名</th>
                    <th>饭店</th>
                </tr>
            </thead>

            <tbody id="tbody">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>红烧肉</td>
                    <td>田老师</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>西红柿鸡蛋</td>
                    <td>田老师</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>红烧狮子头</td>
                    <td>田老师</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>日式肥牛</td>
                    <td>田老师</td>
                </tr>
            </tbody>

        </table>
    </div>

    <script src="../jquery-1.12.4.js"></script>
    <script>
        //原生js实现方式
        // var inpObj = document.getElementById('theadInp')
        // var tbodyObj = document.getElementById('tbody')
        // var inpsObj = tbodyObj.getElementsByTagName('input')

        // inpObj.onclick = function(){
        //     if(this.checked ==true){
        //         for(var i=0;i<inpsObj.length;i++){
        //             inpsObj[i].checked = true
        //         }
        //     }else{
        //         for(var i=0;i<inpsObj.length;i++){
        //             inpsObj[i].checked = false
        //         }
        //     }
        // }

        // for(var i=0;i<inpsObj.length;i++){
        //     inpsObj[i].onclick = function(){
        //         for(j=0;j<inpsObj.length;j++){
        //             if(inpsObj[j].checked == true){
        //                 inpObj.checked = true
        //             }else{
        //                 inpObj.checked = false 
        //             }
        //         }
        //     }
        // }


        //jq实现方式
        // var inp = $('#tbody input')
        // $("#theadInp").click(function(){
        //     // console.log(inp)
        //     if(this.checked){
        //         inp.prop('checked',true)   
        //     }else{
        //         inp.prop('checked',false)   
        //     }
        // })

        // inp.click(function(){
        //   if(this.checked){
        //     $("#theadInp").prop('checked',true)
        //   }else{
        //     $("#theadInp").prop('checked',false) 
        //   }
        // })

        //第二遍
        //需求：
        //1.点击上面的全选 下面的所有input都是全选的状态 反之一样
        $('#theadInp').click(function () {
            if (this.checked) {
                $('#tbody input').prop('checked', true)
            } else {
                $('#tbody input').prop('checked', false)
            }
        })
        //2.点击下面的每个input 如果都是全选的状态上面的就全选 如果有一个不是选中的状态 上面的就是非选中的状态
        $('#tbody input').click(function () {
            if (this.checked) {
                $('#theadInp').prop('checked', true)
            } else {
                $('#theadInp').prop('checked', false)

            }
        })
    </script>

</body>

</html>